<route lang="json5">
  {
    style: {
      navigationBarTitleText: '积分转账',
    },
  }
  </route>
<template>
  <view class="page">

    <view class="container">
      <!-- 转账类型选择 -->

      <view class="content-card">


        <!-- 转给其他会员表单 -->
        <view class="form-card">
          <view class="form-item">
            <text class="label">收款方会员ID</text>
            <view class="flex items-center justify-between">
              <uni-easyinput v-model="otherForm.receive_id" placeholder="请输入收款方会员ID" :styles="{
                borderColor: '#EEEEEE',
                borderRadius: '8px',
              }" />
              <button class="check-btn w-2" @click="handleCheckReceiveId">校验</button>
            </view>
          </view>
          <view class="form-item" v-if="otherForm.receive_nickname">
            <text class="label">昵称：{{ otherForm.receive_nickname }}</text>
          </view>
          <view class="form-item">
            <text class="label">转账数量</text>
            <uni-easyinput v-model="otherForm.points" type="digit" placeholder="最低转账0.01" :styles="{
              borderColor: '#EEEEEE',
              borderRadius: '8px',
            }" />
          </view>
          <view class="fee-info">
            <text class="fee-label">手续费：</text>
            <text class="fee-value">{{ rate }}%</text>
          </view>
          <!-- <view class="form-item">
          <text class="label">手机号</text>
          <uni-easyinput
            v-model="otherForm.receive_tel"
            type="number"
            placeholder="请输入手机号"
            :styles="{
              borderColor: '#EEEEEE',
              borderRadius: '8px',
            }"
          /> -->
          <!-- </view> -->
          <view class="form-item">
            <text class="label">支付密码</text>
            <uni-easyinput v-model="otherForm.pay_pwd" type="password" placeholder="请输入支付密码" :styles="{
              borderColor: '#EEEEEE',
              borderRadius: '8px',
            }" />
          </view>
          <button class="submit-btn" @click="handleOtherTransfer">确认转账</button>
        </view>
      </view>
    </view>


    <!-- 结果弹窗 -->
    <uni-popup ref="messagePopup" type="message">
      <uni-popup-message :type="popupConfig.type" :message="popupConfig.message" :duration="2000" />
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { postTransferPointsToSelfAPI, postTransferPointsToOtherAPI, getUserDataAPI, getAdminTelAPI } from '@/service/index/index'
import { useUserStore } from '@/store/user'

// 当前选中的分段
const current = ref(0)

// 转给自己的表单数据
const selfForm = reactive({
  points: '',
  pay_pwd: '',
})

// 转给其他人的表单数据
const otherForm = reactive({
  points: '',
  receive_id: '',
  receive_tel: '',
  receive_nickname: '',
  pay_pwd: '',
})
const rate = ref('')

const getAdminTel = async () => {
  const res = await getAdminTelAPI();
  if (res.code === 1 && res.data) {
    rate.value = res.data.points_to_activity_points_rate;
  }
};

// 弹窗实例
const messagePopup = ref()
const popupConfig = reactive({
  type: 'success',
  message: '',
})
const handleCheckReceiveId = () => {
  if (!otherForm.receive_id) {
    showMessage('error', '请输入扣减人ID')
    return
  }
  getUserDataAPI({
    receive_id: otherForm.receive_id
  }).then((res) => {
    console.log(res)
    if (res.code === 1) {
      otherForm.receive_nickname = res.data.username
      // otherForm.receive_tel=res.data.tel
    } else {
      showMessage('error', res.msg)
    }
  })
}

// 分段切换
const onSegmentChange = (e: { currentIndex: number }) => {
  current.value = e.currentIndex
}

// 显示结果弹窗
const showMessage = (type: 'success' | 'error', message: string) => {
  popupConfig.type = type
  popupConfig.message = message
  messagePopup.value.open()
}

// 转给自己
const handleSelfTransfer = () => {
  if (!selfForm.points) {
    showMessage('error', '请输入转账数量')
    return
  }
  if (Number(selfForm.points) < 0.01) {
    showMessage('error', '最低转账数量为0.01')
    return
  }
  if (!selfForm.pay_pwd) {
    showMessage('error', '请输入支付密码')
    return;
  }
  postTransferPointsToSelfAPI(
    selfForm
  ).then(res => {
    console.log(res)
    if (res.code == 1) {
      showMessage('success', '转账成功')
      selfForm.points = ''
      selfForm.pay_pwd = ''
    } else {
      showMessage('error', res.msg)
    }
  })
}

// 转给其他会员
const handleOtherTransfer = () => {
  if (!otherForm.receive_id) {
    showMessage('error', '请输入收款方账号')
    return
  }
  if (!otherForm.points) {
    showMessage('error', '请输入转账数量')
    return
  }
  if (Number(otherForm.points) < 0.01) {
    showMessage('error', '最低转账数量为0.01')
    return
  }

  if (!otherForm.pay_pwd) {
    showMessage('error', '请输入支付密码')
    return;
  }

  // if (!otherForm.receive_tel) {
  //   showMessage('error', '请输入手机号')
  //   return
  // }
  // if (!/^1\d{10}$/.test(otherForm.receive_tel)) {
  //   showMessage('error', '请输入正确的手机号')
  //   return
  // }

  postTransferPointsToOtherAPI(otherForm).then((res) => {
    if (res.code == 1) {
      showMessage('success', '转账成功')
      otherForm.receive_id = ''
      otherForm.receive_nickname = ''
      otherForm.points = ''
      otherForm.receive_tel = ''
      otherForm.pay_pwd = ''
    } else {
      showMessage('error', res.msg)
    }

  })

}

onMounted(() => {
  if (!useUserStore().userInfo.token) {
    uni.navigateTo({
      url: '/pages/login/login'
    })
    return
  }
  getAdminTel()
})
</script>

<style>
page {
  height: 100%;
}

.page {
  height: 100%;
  background-color: #f8f8f8;
}

.container {
  padding: 20rpx 0;
}

.content-card {
  padding: 0 20rpx;

}

.segment {
  padding: 20rpx;
  margin-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.segment :deep(.segmented-control__item) {
  height: 70rpx;
  padding: 0 30rpx;
  line-height: 70rpx;
}

.segment :deep(.segmented-control__text) {
  font-size: 14px;
}

.form-card {
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.03);
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  margin-bottom: 20rpx;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.fee-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff7f7;
  border-radius: 8rpx;
}

.record-card {
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.fee-label {
  font-size: 14px;
  color: #333333;
}

.fee-value {
  font-size: 14px;
  font-weight: 500;
  color: #1890ff;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  font-size: 16px;
  font-weight: 500;
  line-height: 88rpx;
  color: #ffffff;
  background: #1890ff;
  border: none;
  border-radius: 44rpx;
}

.submit-btn:active {
  opacity: 0.9;
}

/* uni-easyinput样式重置 */
:deep(.uni-easyinput__content) {
  min-height: 88rpx;
  background-color: #f8f8f8;
}

:deep(.uni-easyinput__content-input) {
  font-size: 14px;
  color: #333333;
}

:deep(.is-input-border) {
  border: none !important;
}

:deep(.uni-easyinput__placeholder-class) {
  font-size: 14px;
  color: #999999;
}

.check-btn {
  width: 140rpx;
  height: 60rpx;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 60rpx;
  color: #ffffff;
  background: #1890ff;
  border: none;
  border-radius: 28rpx;
  outline: none;
  margin-left: 10rpx;
}
</style>
